接續昨天,然後影片參考網址如下:
https://www.youtube.com/watch?v=avo71iW9mI4&list=LL&index=2&t=103s
HTML 沒變
<link href="C1.css" rel="stylesheet" type="text/css">
<body>
<div class="T1"></div>
<div class="T1"></div>
</body>
CSS (注意下上一行有沒有漏掉分號,因為這個檢查好久XD)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000000;
justify-content: center;
align-items: center;
min-height: 100vh;
display: flex;
}
.T1{
position: relative;
width: 600px;
height: 600px;
}
.T1:before{
content: '';
position: absolute;
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
border: 20px solid #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 50px #FF3838, /*外圈光暈*/
inset 0 0 50px #8EB6FF; /*內圈光暈*/
-webkit-box-reflect: below 10px linear-gradient(transparent,transparent,#0002);/*倒影,數字好像不是色碼,好像是透明度*/
animation: animate 5s linear infinite;
}
@keyframes animate{ /*顏色漸變*/
0%{
box-shadow: 0 0 50px #FF3838,
inset 0 0 50px #8EB6FF;
filter : hue-rotate(0deg); /*應該是指"色環"的角度*/
}
20%{
box-shadow: 0 0 60px #FF3838,
inset 0 0 40px #8EB6FF;
}
40%{
box-shadow: 0 0 80px #FF3838,
inset 0 0 80px #8EB6FF;
}
60%{
box-shadow: 0 0 50px #FF3838,
inset 0 0 50px #8EB6FF;
}
80%{
box-shadow: 0 0 10px #FF3838,
inset 0 0 10px #8EB6FF;
}
100%{
box-shadow: 0 0 90px #FF3838,
inset 0 0 90px #8EB6FF;
filter : hue-rotate(360deg);
}
}
成果如下 (同樣程式碼,不同的時間下所擷取的畫面)
今天先這樣,明天把它弄完